"use client"

import { useState, useEffect } from "react"
import { EvolutionTimeline, createCharacterEvolution, createRadicalEvolution } from '../EvolutionTimeline'

interface ZigenDisplayProps {
  selectedContent: string
  currentChar: string
}

export function ZigenDisplay({ selectedContent, currentChar = "皮" }: ZigenDisplayProps) {
  const [activeGrid, setActiveGrid] = useState<string | null>(null)
  const [currentStep, setCurrentStep] = useState(0)
  const [score, setScore] = useState(0)
  const [showModal, setShowModal] = useState(false)
  const [modalContent, setModalContent] = useState<string | null>(null)

  // 根据选择的内容获取对应的格子
  useEffect(() => {
    // 根据底部选择器的内容更新格子配置
    updateGridItems(selectedContent)
  }, [selectedContent])

  // 根据底部选择器更新格子内容
  const updateGridItems = (contentType: string) => {
    let newGridItems = []
    
    switch(contentType) {
      case 'hanzi': // 基础信息
        newGridItems = [
          { 
            id: 'pinyin_bihua', 
            label: '拼音笔画', 
            icon: '📝',
            color: 'from-blue-400 to-blue-600',
            bgColor: 'bg-blue-50'
          },
          { 
            id: 'basic_meaning', 
            label: '基本含义', 
            icon: '💭',
            color: 'from-purple-400 to-purple-600',
            bgColor: 'bg-purple-50'
          },
          { 
            id: 'character_form', 
            label: '字形特征', 
            icon: '🔍',
            color: 'from-green-400 to-green-600',
            bgColor: 'bg-green-50'
          },
          { 
            id: 'memory_tips', 
            label: '记忆技巧', 
            icon: '🧠',
            color: 'from-orange-400 to-orange-600',
            bgColor: 'bg-orange-50'
          }
        ]
        break
      
      case 'zigen': // 演变历程
        newGridItems = [
          { 
            id: 'jiaguwen', 
            label: '甲骨文', 
            icon: '🦴',
            color: 'from-amber-400 to-amber-600',
            bgColor: 'bg-amber-50'
          },
          { 
            id: 'jinwen', 
            label: '金文', 
            icon: '🏺',
            color: 'from-yellow-400 to-yellow-600',
            bgColor: 'bg-yellow-50'
          },
          { 
            id: 'xiaozhuan', 
            label: '小篆', 
            icon: '📜',
            color: 'from-indigo-400 to-indigo-600',
            bgColor: 'bg-indigo-50'
          },
          { 
            id: 'kaishu', 
            label: '楷书', 
            icon: '✒️',
            color: 'from-gray-400 to-gray-600',
            bgColor: 'bg-gray-50'
          }
        ]
        break
      
      case 'bihua': // 扩展应用
        newGridItems = [
          { 
            id: 'common_words', 
            label: '常用词组', 
            icon: '📚',
            color: 'from-green-400 to-green-600',
            bgColor: 'bg-green-50'
          },
          { 
            id: 'example_sentences', 
            label: '例句应用', 
            icon: '📖',
            color: 'from-teal-400 to-teal-600',
            bgColor: 'bg-teal-50'
          },
          { 
            id: 'related_chars', 
            label: '相关汉字', 
            icon: '🔗',
            color: 'from-cyan-400 to-cyan-600',
            bgColor: 'bg-cyan-50'
          },
          { 
            id: 'usage_context', 
            label: '使用语境', 
            icon: '🎭',
            color: 'from-emerald-400 to-emerald-600',
            bgColor: 'bg-emerald-50'
          }
        ]
        break
      
      case 'lianxi': // 随堂小练
        newGridItems = [
          { 
            id: 'choice_quiz', 
            label: '选择题', 
            icon: '✅',
            color: 'from-pink-400 to-pink-600',
            bgColor: 'bg-pink-50'
          },
          { 
            id: 'fill_blank', 
            label: '填空题', 
            icon: '✏️',
            color: 'from-rose-400 to-rose-600',
            bgColor: 'bg-rose-50'
          },
          { 
            id: 'match_game', 
            label: '连线题', 
            icon: '🔗',
            color: 'from-violet-400 to-violet-600',
            bgColor: 'bg-violet-50'
          },
          { 
            id: 'writing_practice', 
            label: '书写练习', 
            icon: '✍️',
            color: 'from-fuchsia-400 to-fuchsia-600',
            bgColor: 'bg-fuchsia-50'
          }
        ]
        break
      
      default:
        newGridItems = [
          { 
            id: 'pinyin_bihua', 
            label: '拼音笔画', 
            icon: '📝',
            color: 'from-blue-400 to-blue-600',
            bgColor: 'bg-blue-50'
          },
          { 
            id: 'basic_meaning', 
            label: '基本含义', 
            icon: '💭',
            color: 'from-purple-400 to-purple-600',
            bgColor: 'bg-purple-50'
          },
          { 
            id: 'character_form', 
            label: '字形特征', 
            icon: '🔍',
            color: 'from-green-400 to-green-600',
            bgColor: 'bg-green-50'
          },
          { 
            id: 'memory_tips', 
            label: '记忆技巧', 
            icon: '🧠',
            color: 'from-orange-400 to-orange-600',
            bgColor: 'bg-orange-50'
          }
        ]
    }
    
    setCurrentGridItems(newGridItems)
  }

  // 添加状态来存储当前格子配置
  const [currentGridItems, setCurrentGridItems] = useState([
    { 
      id: 'pinyin_bihua', 
      label: '拼音笔画', 
      icon: '📝',
      color: 'from-blue-400 to-blue-600',
      bgColor: 'bg-blue-50'
    },
    { 
      id: 'basic_meaning', 
      label: '基本含义', 
      icon: '💭',
      color: 'from-purple-400 to-purple-600',
      bgColor: 'bg-purple-50'
    },
    { 
      id: 'character_form', 
      label: '字形特征', 
      icon: '🔍',
      color: 'from-green-400 to-green-600',
      bgColor: 'bg-green-50'
    },
    { 
      id: 'memory_tips', 
      label: '记忆技巧', 
      icon: '🧠',
      color: 'from-orange-400 to-orange-600',
      bgColor: 'bg-orange-50'
    }
  ])

  // 基础信息数据
  const basicInfo = {
    char: currentChar,
    pinyin: "pí",
    strokes: 5,
    radical: "皮",
    meaning: "动物的皮肤，外层覆盖物",
    features: "左右结构，皮字旁",
    memory: "像剥下来的动物皮毛的样子",
    story: "古人看到动物身上的皮毛，就创造了这个字"
  }

  // 演变历程数据
  const evolution = [
    {
      period: "甲骨文",
      char: "𤰇",
      description: "像手拿着动物皮毛的样子，很形象地表现了'皮'的概念",
      story: "古人用手剥动物的皮，创造了最早的皮字",
      color: "from-amber-400 to-orange-500"
    },
    {
      period: "金文", 
      char: "𤰈",
      description: "在甲骨文基础上，线条更加规整，但仍保持象形特征",
      story: "青铜器时代，字形变得更加工整美观",
      color: "from-yellow-400 to-amber-500"
    },
    {
      period: "大篆",
      char: "皮",
      description: "字形进一步规范化，开始向现代汉字靠近",
      story: "秦朝统一文字，皮字有了统一的写法",
      color: "from-green-400 to-emerald-500"
    },
    {
      period: "小篆",
      char: "皮",
      description: "线条更加流畅，为现代汉字奠定了基础",
      story: "小篆是现代汉字的直接祖先",
      color: "from-blue-400 to-cyan-500"
    }
  ]

  // 扩展应用数据
  const extensions = {
    meanings: ["动物的皮肤", "植物的外皮", "物体的表面", "调皮、顽皮"],
    words: [
      { word: "皮肤", meaning: "人和动物身体表面的组织" },
      { word: "树皮", meaning: "树木外层的保护层" },
      { word: "皮球", meaning: "用皮革制成的球" },
      { word: "调皮", meaning: "爱开玩笑，不太听话" }
    ],
    sentences: [
      "小猫的皮毛很柔软。",
      "大树的树皮很粗糙。", 
      "小朋友在玩皮球。"
    ]
  }

  // 练习题目数据
  const questions = [
    {
      question: "皮字的拼音是什么？",
      options: ["pí", "bí", "pǐ", "pì"],
      correct: 0,
      explanation: "皮字读作pí，第二声"
    },
    {
      question: "皮字有几画？",
      options: ["4画", "5画", "6画", "7画"],
      correct: 1,
      explanation: "皮字一共有5画：横、撇、竖、横折钩、竖"
    },
    {
      question: "下面哪个词语用了皮字？",
      options: ["头发", "皮肤", "眼睛", "鼻子"],
      correct: 1,
      explanation: "皮肤就是用了皮字，指身体表面的组织"
    }
  ]

  // 点击格子处理函数
  const handleGridClick = (gridId: string) => {
    setActiveGrid(gridId)
    
    // 如果是演变历程相关内容，不显示弹出框，保持直播区空白
    if (['jiaguwen', 'jinwen', 'xiaozhuan', 'kaishu', 'zigen'].includes(gridId)) {
      setShowModal(false)
      setModalContent(null)
    } else {
      setModalContent(gridId)
      setShowModal(true)
    }
  }

  // 关闭模态窗口
  const closeModal = () => {
    setShowModal(false)
    setModalContent(null)
  }

  // 渲染模态窗口内容
  const renderModalContent = () => {
    if (!modalContent) return null

    // 基础信息类别
    if (['pinyin_bihua', 'basic_meaning', 'character_form', 'memory_tips'].includes(modalContent)) {
      return <BasicInfoDetail info={basicInfo} subType={modalContent} />
    }
    
    // 演变历程类别 - 不显示内容
    if (['jiaguwen', 'jinwen', 'xiaozhuan', 'kaishu'].includes(modalContent)) {
      return null
    }
    
    // 扩展应用类别
    if (['common_words', 'example_sentences', 'related_chars', 'usage_context'].includes(modalContent)) {
      return <ExtensionDetail extensions={extensions} subType={modalContent} />
    }
    
    // 随堂小练类别
    if (['choice_quiz', 'fill_blank', 'match_game', 'writing_practice'].includes(modalContent)) {
      return <PracticeDetail questions={questions} score={score} setScore={setScore} subType={modalContent} />
    }

    // 兼容旧的ID
    switch(modalContent) {
      case 'hanzi':
        return <BasicInfoDetail info={basicInfo} subType="basic_meaning" />
      case 'zigen':
        return null
      case 'bihua':
        return <ExtensionDetail extensions={extensions} subType="common_words" />
      case 'lianxi':
        return <PracticeDetail questions={questions} score={score} setScore={setScore} subType="choice_quiz" />
      default:
        return null
    }
  }

  // 根据selectedContent决定页面风格
  const renderPageContent = () => {
    // 基础信息：左边大字 + 右边格子 + 弹窗
    if (selectedContent === 'hanzi') {
      return (
        <>
          <div className="w-full h-full flex bg-gradient-to-br from-gray-50 to-white rounded-3xl overflow-hidden relative">
            {/* 左侧：大字展示区 */}
            <div className="flex-1 flex items-center justify-center bg-gradient-to-br from-purple-50 to-indigo-50 relative">
              {/* 装饰背景 */}
              <div className="absolute inset-0 opacity-10">
                <div className="absolute w-32 h-32 bg-purple-300 rounded-full blur-3xl top-10 left-10 animate-pulse"></div>
                <div className="absolute w-24 h-24 bg-blue-300 rounded-full blur-3xl bottom-10 right-10 animate-pulse delay-1000"></div>
              </div>
              
              {/* 主字展示 */}
              <div className="text-center relative z-10">
                <div className="text-[12rem] font-black text-transparent bg-gradient-to-r from-purple-600 via-blue-600 to-indigo-600 bg-clip-text mb-6 animate-pulse leading-none">
                  {currentChar}
                </div>
                <div className="text-4xl font-bold text-purple-700 mb-2">
                  {basicInfo.pinyin}
                </div>
                <div className="text-xl text-gray-600 bg-white/80 rounded-full px-6 py-2 inline-block shadow-lg">
                  {basicInfo.strokes}画 · {basicInfo.radical}部
                </div>
              </div>
            </div>

            {/* 右侧：2x2格子选择器 */}
            <div className="w-80 p-6 bg-white flex flex-col justify-center">
              <h3 className="text-xl font-bold text-gray-800 mb-6 text-center">学习内容</h3>
              
              {/* 2x2 格子网格 */}
              <div className="grid grid-cols-2 gap-4">
                {currentGridItems.map((item) => (
                  <button
                    key={item.id}
                    onClick={() => handleGridClick(item.id)}
                    className={`
                      relative h-24 rounded-2xl transition-all duration-300 transform hover:scale-105
                      ${activeGrid === item.id 
                        ? `bg-gradient-to-br ${item.color} text-white shadow-xl scale-105 ring-4 ring-white ring-opacity-50` 
                        : `${item.bgColor} text-gray-700 hover:shadow-lg border-2 border-gray-200 hover:border-gray-300`
                      }
                    `}
                  >
                    {/* 选中状态的光晕 */}
                    {activeGrid === item.id && (
                      <div className={`absolute inset-0 bg-gradient-to-br ${item.color} rounded-2xl blur-lg opacity-30 -z-10 animate-pulse`}></div>
                    )}
                    
                    <div className="flex flex-col items-center justify-center h-full relative z-10">
                      <div className={`text-2xl mb-1 ${activeGrid === item.id ? 'animate-bounce' : ''}`}>
                        {item.icon}
                      </div>
                      <div className="text-sm font-semibold">
                        {item.label}
                      </div>
                    </div>
                    
                    {/* 选中指示器 */}
                    {activeGrid === item.id && (
                      <div className="absolute -top-2 -right-2 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center text-xs animate-bounce">
                        ✨
                      </div>
                    )}
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* 模态窗口 - 只在基础信息时显示 */}
          {showModal && (
            <div 
              className="absolute inset-0 bg-black/60 backdrop-blur-md flex items-center justify-center z-[50] p-4"
              onClick={closeModal}
            >
              <div 
                className="bg-white rounded-2xl shadow-2xl w-[90%] h-[85%] overflow-hidden relative animate-in fade-in-0 zoom-in-95 duration-300"
                onClick={(e) => e.stopPropagation()}
              >
                {/* 模态窗口标题 */}
                <div className="bg-gradient-to-r from-purple-500 to-blue-500 text-white p-4 text-center relative overflow-hidden">
                  {/* 装饰背景 */}
                  <div className="absolute inset-0 bg-gradient-to-r from-purple-600/20 to-blue-600/20"></div>
                  <div className="absolute top-0 left-0 w-full h-full bg-white/10 animate-pulse"></div>
                  
                  <div className="flex items-center justify-center gap-3 relative z-10">
                    <div className="text-3xl animate-bounce">
                      {currentGridItems.find(item => item.id === modalContent)?.icon}
                    </div>
                    <h2 className="text-2xl font-bold">
                      {currentGridItems.find(item => item.id === modalContent)?.label}
                    </h2>
                  </div>
                </div>

                {/* 模态窗口内容 */}
                <div className="p-4 h-[calc(100%-80px)] flex items-center justify-center">
                  <div className="w-full h-full flex items-center justify-center">
                    {renderModalContent()}
                  </div>
                </div>
              </div>
            </div>
          )}
        </>
      )
    }

    // 演变历程：时间线组件
    if (selectedContent === 'zigen') {
      const evolutionPeriods = createCharacterEvolution(currentChar)
      return (
        <EvolutionTimeline 
          title="汉字演变历程"
          subtitle={`"${currentChar}"字的历史演变`}
          periods={evolutionPeriods}
          defaultSelected="xiandai"
        />
      )
    }

    // 扩展应用：部首演变历程
    if (selectedContent === 'bihua') {
      // 提取当前字符的部首（这里简化处理，实际应该有部首提取逻辑）
      const radical = currentChar.includes('木') ? '木' : currentChar.charAt(0)
      const radicalPeriods = createRadicalEvolution(radical)
      return (
        <EvolutionTimeline 
          title="部首演变历程"
          subtitle={`"${radical}"部首的历史演变`}
          periods={radicalPeriods}
          defaultSelected="xiandai"
        />
      )
    }

    // 随堂小练：不同的页面风格
    if (selectedContent === 'lianxi') {
      return (
        <div className="w-full h-full bg-gradient-to-br from-pink-50 to-red-50 rounded-3xl flex items-center justify-center">
          <div className="text-center">
            <div className="text-6xl mb-6">🎮</div>
            <h2 className="text-3xl font-bold text-pink-700 mb-4">随堂小练</h2>
            <p className="text-xl text-gray-600">"{currentChar}"字的练习题目</p>
          </div>
        </div>
      )
    }

    // 默认：空白页面
    return (
      <div className="w-full h-full bg-gradient-to-br from-gray-50 to-white rounded-3xl">
        {/* 空白页面 */}
      </div>
    )
  }

  return renderPageContent()
}

// 基础信息详情
function BasicInfoDetail({ info, subType }: { info: any, subType: string }) {
  const renderContent = () => {
    switch(subType) {
      case 'pinyin_bihua':
        return (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full">
            {/* 中央大字展示 */}
            <div className="lg:col-span-1 flex items-center justify-center">
              <div className="text-center bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8 border-2 border-blue-200 shadow-lg">
                <div className="text-8xl font-black mb-4 text-blue-600">{info.char}</div>
                <div className="text-4xl font-bold text-blue-700 mb-2">{info.pinyin}</div>
                <div className="text-2xl text-blue-600">共 {info.strokes} 画</div>
              </div>
            </div>
            
            {/* 右侧详细信息 */}
            <div className="lg:col-span-2 grid grid-cols-1 gap-4">
              <div className="bg-white rounded-xl p-6 border-2 border-blue-200 shadow-md">
                <div className="text-xl font-bold text-blue-600 mb-4 flex items-center">
                  <span className="text-2xl mr-2">📝</span> 拼音详解
                </div>
                <div className="grid grid-cols-3 gap-4 text-lg">
                  <div className="text-center bg-blue-50 rounded-lg p-3">
                    <div className="font-semibold text-blue-700">声母</div>
                    <div className="text-2xl font-bold text-blue-600">p</div>
                  </div>
                  <div className="text-center bg-blue-50 rounded-lg p-3">
                    <div className="font-semibold text-blue-700">韵母</div>
                    <div className="text-2xl font-bold text-blue-600">í</div>
                  </div>
                  <div className="text-center bg-blue-50 rounded-lg p-3">
                    <div className="font-semibold text-blue-700">声调</div>
                    <div className="text-lg font-bold text-blue-600">二声</div>
                  </div>
                </div>
              </div>
              
              <div className="bg-white rounded-xl p-6 border-2 border-blue-200 shadow-md">
                <div className="text-xl font-bold text-blue-600 mb-4 flex items-center">
                  <span className="text-2xl mr-2">✏️</span> 笔画构成
                </div>
                <div className="grid grid-cols-5 gap-2 text-center">
                  {['横（一）', '撇（丿）', '竖（丨）', '横折钩（乛）', '竖（丨）'].map((stroke, index) => (
                    <div key={index} className="bg-blue-50 rounded-lg p-3">
                      <div className="text-sm font-semibold text-blue-700">{index + 1}</div>
                      <div className="text-lg font-bold text-blue-600">{stroke.split('（')[1]?.replace('）', '') || stroke}</div>
                      <div className="text-xs text-blue-500">{stroke.split('（')[0]}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )
      
      case 'basic_meaning':
        return (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 h-full">
            <div className="space-y-6">
              <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-8 border-2 border-purple-200 shadow-lg">
                <div className="text-2xl font-bold text-purple-600 mb-6 flex items-center">
                  <span className="text-3xl mr-3">💭</span> 基本含义
                </div>
                <div className="text-gray-800 text-xl leading-relaxed">{info.meaning}</div>
              </div>
              
              <div className="bg-white rounded-xl p-6 border-2 border-purple-200 shadow-md">
                <div className="text-xl font-bold text-purple-600 mb-4 flex items-center">
                  <span className="text-2xl mr-2">🌟</span> 词性分析
                </div>
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <span className="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-semibold">名词</span>
                    <span className="text-gray-700">皮肤、树皮、皮革</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-semibold">形容词</span>
                    <span className="text-gray-700">调皮、顽皮</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="bg-white rounded-xl p-6 border-2 border-purple-200 shadow-md">
              <div className="text-xl font-bold text-purple-600 mb-6 flex items-center">
                <span className="text-2xl mr-2">📖</span> 详细解释
              </div>
              <div className="space-y-6">
                <div className="bg-purple-50 rounded-lg p-4">
                  <div className="font-semibold text-purple-700 mb-2">本义</div>
                  <div className="text-gray-800">动物身上的毛皮</div>
                </div>
                <div className="bg-purple-50 rounded-lg p-4">
                  <div className="font-semibold text-purple-700 mb-2">引申义</div>
                  <div className="text-gray-800">物体的表面层</div>
                </div>
                <div className="bg-purple-50 rounded-lg p-4">
                  <div className="font-semibold text-purple-700 mb-2">比喻义</div>
                  <div className="text-gray-800">顽皮、调皮</div>
                </div>
              </div>
            </div>
          </div>
        )
      
      case 'character_form':
        return (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 h-full">
            <div className="space-y-6">
              <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-8 border-2 border-green-200 shadow-lg">
                <div className="text-2xl font-bold text-green-600 mb-6 flex items-center">
                  <span className="text-3xl mr-3">🔍</span> 字形特征
                </div>
                <div className="text-gray-800 text-xl leading-relaxed">{info.features}</div>
              </div>
              
              <div className="bg-green-100 rounded-xl p-6 border-2 border-green-300 shadow-md">
                <div className="text-xl font-bold text-green-700 mb-4 flex items-center">
                  <span className="text-2xl mr-2">👁️</span> 观察要点
                </div>
                <div className="space-y-3 text-green-800">
                  <div className="flex items-center gap-2">
                    <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                    <span>左边像手的形状</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                    <span>右边像剥下的皮毛</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                    <span>整体呈现剥皮的动作</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="bg-white rounded-xl p-6 border-2 border-green-200 shadow-md">
              <div className="text-xl font-bold text-green-600 mb-6 flex items-center">
                <span className="text-2xl mr-2">🏗️</span> 结构分析
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-green-50 rounded-lg p-4 text-center">
                  <div className="font-semibold text-green-700 mb-2">结构类型</div>
                  <div className="text-2xl font-bold text-green-600">左右结构</div>
                </div>
                <div className="bg-green-50 rounded-lg p-4 text-center">
                  <div className="font-semibold text-green-700 mb-2">部首</div>
                  <div className="text-2xl font-bold text-green-600">皮部</div>
                </div>
                <div className="bg-green-50 rounded-lg p-4 text-center">
                  <div className="font-semibold text-green-700 mb-2">部首位置</div>
                  <div className="text-lg font-bold text-green-600">整字</div>
                </div>
                <div className="bg-green-50 rounded-lg p-4 text-center">
                  <div className="font-semibold text-green-700 mb-2">字形特点</div>
                  <div className="text-lg font-bold text-green-600">象形字</div>
                </div>
              </div>
            </div>
          </div>
        )
      
      case 'memory_tips':
        return (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 h-full">
            <div className="space-y-6">
              <div className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-8 border-2 border-orange-200 shadow-lg">
                <div className="text-2xl font-bold text-orange-600 mb-6 flex items-center">
                  <span className="text-3xl mr-3">🧠</span> 记忆技巧
                </div>
                <div className="text-gray-800 text-xl leading-relaxed">{info.memory}</div>
              </div>
              
              <div className="bg-white rounded-xl p-6 border-2 border-orange-200 shadow-md">
                <div className="text-xl font-bold text-orange-600 mb-4 flex items-center">
                  <span className="text-2xl mr-2">🎯</span> 记忆口诀
                </div>
                <div className="text-gray-800 text-center text-2xl font-bold bg-gradient-to-r from-orange-100 to-yellow-100 rounded-lg p-6 border border-orange-300">
                  "手剥动物皮，皮字记心里"
                </div>
              </div>
            </div>
            
            <div className="space-y-6">
              <div className="bg-yellow-50 rounded-xl p-6 border-2 border-yellow-200 shadow-md">
                <div className="text-xl font-bold text-yellow-800 mb-4 flex items-center">
                  <span className="text-2xl mr-2">📖</span> 字源故事
                </div>
                <div className="text-yellow-700 text-lg leading-relaxed">{info.story}</div>
              </div>
              
              <div className="bg-orange-100 rounded-xl p-6 border-2 border-orange-300 shadow-md">
                <div className="text-xl font-bold text-orange-700 mb-4 flex items-center">
                  <span className="text-2xl mr-2">💡</span> 联想记忆
                </div>
                <div className="space-y-3 text-orange-800">
                  <div className="flex items-center gap-2">
                    <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
                    <span>想象：古人用手剥动物皮</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
                    <span>联系：皮肤、树皮都是外层</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
                    <span>记住：调皮就像剥皮一样顽劣</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
      
      default:
        return (
          <div className="grid grid-cols-2 gap-6 h-full">
            <div className="bg-blue-50 rounded-xl p-6 border-2 border-blue-200 shadow-md">
              <div className="text-lg font-bold text-blue-600 mb-4">含义</div>
              <div className="text-gray-800 text-lg">{info.meaning}</div>
            </div>
            
            <div className="bg-green-50 rounded-xl p-6 border-2 border-green-200 shadow-md">
              <div className="text-lg font-bold text-green-600 mb-4">特征</div>
              <div className="text-gray-800 text-lg">{info.features}</div>
            </div>
            
            <div className="bg-orange-50 rounded-xl p-6 border-2 border-orange-200 shadow-md">
              <div className="text-lg font-bold text-orange-600 mb-4">记忆技巧</div>
              <div className="text-gray-800 text-lg">{info.memory}</div>
            </div>
            
            <div className="bg-yellow-50 rounded-xl p-6 border-2 border-yellow-200 shadow-md">
              <div className="text-lg font-bold text-yellow-800 mb-4">📖 字源故事</div>
              <div className="text-yellow-700 text-lg">{info.story}</div>
            </div>
          </div>
        )
    }
  }

  return (
    <div className="w-full h-full">
      {renderContent()}
    </div>
  )
}

// 演变历程详情
function EvolutionDetail({ evolution, currentStep, setCurrentStep, subType }: any) {
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentStep((prev: number) => (prev + 1) % evolution.length)
    }, 3000)
    return () => clearInterval(timer)
  }, [evolution.length, setCurrentStep])

  return (
    <div className="space-y-6">
      {/* 时间轴 */}
      <div className="flex justify-between">
        {evolution.map((item: any, index: number) => (
          <button
            key={index}
            onClick={() => setCurrentStep(index)}
            className={`
              w-12 h-12 rounded-full text-sm font-bold transition-all duration-300
              ${currentStep === index 
                ? `bg-gradient-to-r ${item.color} text-white scale-125 shadow-lg` 
                : 'bg-gray-200 text-gray-600 hover:bg-gray-300'
              }
            `}
          >
            {index + 1}
          </button>
        ))}
      </div>
      
      {/* 当前字形 */}
      <div className="text-center bg-gray-50 rounded-xl p-8">
        <div className="text-8xl font-black mb-4 animate-bounce">
          {evolution[currentStep].char}
        </div>
        <div className={`text-lg font-bold text-white px-4 py-2 rounded-full bg-gradient-to-r ${evolution[currentStep].color} inline-block mb-4`}>
          {evolution[currentStep].period}
        </div>
        <p className="text-gray-600 leading-relaxed text-lg">
          {evolution[currentStep].description}
        </p>
      </div>
      
      {/* 小故事 */}
      <div className="bg-yellow-50 rounded-xl p-6 border border-yellow-200">
        <div className="text-lg font-medium text-yellow-800 mb-2">🌟 小故事</div>
        <div className="text-yellow-700 text-lg">{evolution[currentStep].story}</div>
      </div>
    </div>
  )
}

// 扩展应用详情
function ExtensionDetail({ extensions, subType }: any) {
  return (
    <div className="space-y-6">
      {/* 扩展含义 */}
      <div className="bg-green-50 rounded-xl p-6 border border-green-200">
        <div className="text-lg font-medium text-green-600 mb-4">💡 扩展含义</div>
        <div className="grid grid-cols-2 gap-3">
          {extensions.meanings.map((meaning: string, index: number) => (
            <div key={index} className="bg-white rounded-lg p-3 text-green-800 text-center font-medium border border-green-300">
              {meaning}
            </div>
          ))}
        </div>
      </div>
      
      {/* 常用词组 */}
      <div className="bg-blue-50 rounded-xl p-6 border border-blue-200">
        <div className="text-lg font-medium text-blue-600 mb-4">🔤 常用词组</div>
        <div className="space-y-3">
          {extensions.words.map((item: any, index: number) => (
            <div key={index} className="bg-white rounded-lg p-4 border border-blue-300">
              <div className="text-lg font-bold text-blue-800">{item.word}</div>
              <div className="text-blue-600">{item.meaning}</div>
            </div>
          ))}
        </div>
      </div>
      
      {/* 例句 */}
      <div className="bg-purple-50 rounded-xl p-6 border border-purple-200">
        <div className="text-lg font-medium text-purple-600 mb-4">📝 例句</div>
        <div className="space-y-3">
          {extensions.sentences.map((sentence: string, index: number) => (
            <div key={index} className="bg-white rounded-lg p-4 text-purple-800 border border-purple-300 text-lg">
              {sentence}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// 练习详情
function PracticeDetail({ questions, score, setScore, subType }: any) {
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null)
  const [showResult, setShowResult] = useState(false)
  const [isCorrect, setIsCorrect] = useState(false)

  const handleAnswer = (answerIndex: number) => {
    setSelectedAnswer(answerIndex)
    const correct = answerIndex === questions[currentQuestion].correct
    setIsCorrect(correct)
    setShowResult(true)
    
    if (correct) {
      setScore((prev: number) => prev + 1)
    }
  }

  const nextQuestion = () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(prev => prev + 1)
      setSelectedAnswer(null)
      setShowResult(false)
    } else {
      alert(`完成！得分：${score + (isCorrect ? 1 : 0)}/${questions.length}`)
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="text-lg bg-pink-100 text-pink-800 px-4 py-2 rounded-full">
          第 {currentQuestion + 1} 题 / {questions.length}
        </div>
        <div className="text-lg bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full">
          得分：{score}
        </div>
      </div>

      {!showResult ? (
        <div className="bg-gray-50 rounded-xl p-6">
          <h5 className="text-xl font-medium text-gray-800 mb-6 text-center">
            {questions[currentQuestion].question}
          </h5>
          
          <div className="space-y-3">
            {questions[currentQuestion].options.map((option: string, index: number) => (
              <button
                key={index}
                onClick={() => handleAnswer(index)}
                className="w-full text-left bg-gradient-to-r from-blue-400 to-purple-500 hover:from-blue-500 hover:to-purple-600 text-white text-lg font-medium py-4 px-6 rounded-xl transition-all duration-300 hover:scale-105"
              >
                {String.fromCharCode(65 + index)}. {option}
              </button>
            ))}
          </div>
        </div>
      ) : (
        <div className="bg-gray-50 rounded-xl p-6 text-center">
          <div className={`text-6xl mb-4 ${isCorrect ? 'animate-bounce' : 'animate-pulse'}`}>
            {isCorrect ? '🎉' : '😅'}
          </div>
          <h5 className={`text-xl font-bold mb-4 ${isCorrect ? 'text-green-600' : 'text-orange-600'}`}>
            {isCorrect ? '答对了！' : '再想想哦！'}
          </h5>
          <div className="bg-white rounded-lg p-4 mb-6">
            <p className="text-gray-700 text-lg">
              {questions[currentQuestion].explanation}
            </p>
          </div>
          <button
            onClick={nextQuestion}
            className="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white text-lg font-bold py-3 px-8 rounded-xl transition-all duration-300"
          >
            {currentQuestion < questions.length - 1 ? '下一题 →' : '完成 🎊'}
          </button>
        </div>
      )}
    </div>
  )
} 